<!DOCTYPE html>
<html style="height:100%">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>注册 - 墨影</title>
    <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
    <link rel="stylesheet" href="./register_files/login.css">
    <script type="text/javascript" src="./register_files/patternLock.min.js" charset="utf-8"></script>
	<script>
	//自定义弹框
	function Toast(msg,duration){
		duration=isNaN(duration)?3000:duration;
		var m = document.createElement('div');
		m.innerHTML = msg;
		m.style.cssText="opacity: 0.7;width:100%;height:30px;color:#000;line-height: 30px;text-align: center;border-radius: 5px;position: relative;top: 5px ;left:0px;z-index: 99999;background:#fff;font-size: 20px;";
		document.getElementById("ToastDiv").appendChild(m);
		setTimeout(function() {
			var d = 0.5;
			m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
			m.style.opacity = '0';
			setTimeout(function() { document.getElementById("ToastDiv").removeChild(m) }, d * 1000);
		}, duration);
	}
	</script> 
</head>
<body style="height:100%">
	<style type="text/css">
		body{
			background-image:url(./image/bk.jpg);
			background-size:cover;
		}
        center{
            font-size: 16 px;
            font-color: red;
        }
	</style>
<div class="login-wrapper" id="loginWrapper" style="display: block; min-height: initial;">
    <section class="avatar-wrapper" id="avatarWrapper">
	<img src="./image/icon.png">
	</section>
    <form id="registerForm" action="./register" method="POST">
        <div class="box">
            <div class="input-wrapper">
                <i class="icon forName"></i>
                <!-- 用户名 -->
                <p class="input-box">
                    <input type="text" placeholder="邮箱/手机号" id="registerName" name="name">
                </p>
            </div>
            <div class="input-wrapper">
                <i class="icon forPwd"></i>
                <p class="input-box">
                <input type="password" placeholder="请输入密码" id="registerPassword" name="password">
                </p>
            </div>
			 <div class="input-wrapper">
                <i class="icon forPwd"></i>
                <p class="input-box">
                <input type="password" placeholder="确认密码" id="repeatPassword">
                </p>
            </div>
        </div>
		<div id="ToastDiv" style=" height:30px; width:100%;">
			<script>
				Toast( "{{ HelloMessage }}" ,2000)
			</script>
		</div>
        <a href="javascript:if(document.getElementById('registerPassword').value!=document.getElementById('repeatPassword').value){alert('两次密码不一致！');}else{document.getElementById('registerForm').submit()}" class="btn btnRed" id="loginAction">注册</a>
    </form>
    <footer class="footer">
        <a href="/login">已有账号？登陆</a>
    </footer>
</div>
</body>
</html>